//引入gulp自动化工具模块
const gulp = require('gulp')

//引入html打包模块
const htmlMin = require('gulp-htmlMin')

//引入css打包模块
const cssMin = require('gulp-cssmin')
//引入sass打包模块
const sass = require('gulp-sass')(require('sass'))

//引入js打包模块
const uglify = require('gulp-uglify')

//引入babel语法转换模块
const babel = require('gulp-babel')

//引入删除模块
const del = require('del')

//引入server任务
const webServer = require('gulp-webserver')


//创建html任务
const htmlHandler =()=>{
    //gulp.src()方法是告诉要打包的那个目录下的文件（src目录下的任意名称的html文件）
    return gulp.src('./src/**/*.html')

    //pipe()管理函数，作用是通过这个方法把文件做怎样的处理
    .pipe(htmlMin({
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        // removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS 
    }))

    //gulp.dest()函数的作用是告诉gulp最终把文件压缩后放在那个目录下
    .pipe(gulp.dest('./dist'))
}

//创建css任务
const cssHandler =()=>{
    return gulp.src('./src/sass/*.scss')
    //先把sass转成css任务
    .pipe(sass())
    //再把css进行打包处理
    .pipe(cssMin())
    .pipe(gulp.dest('./dist/css'))
}

//创建js任务
const jsHandler =()=>{
    return gulp.src('./src/js/*.js')
    // 先把ES6语法转换成ES5语法再进行压缩
    .pipe(babel({
        presets:['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
}

//处理libs和img文件夹里面的文件
const libsHandler =()=>{
    //第一个星号表示任意文件名称，第二个星号表示任意文件后缀名
    return gulp.src('./src/libs/**')
    .pipe(gulp.dest('./dist/libs'))
}
const imgHandler =()=>{
    return gulp.src('./src/img/**')
    .pipe(gulp.dest('./dist/img'))
}

const iconHandler =()=>{
    return gulp.src('./src/**/favicon.ico')
    .pipe(gulp.dest('./dist'))
}

const delHandler =()=>{
    return del(['./dist'])
}

//配置服务器任务
const serverHandler = function(){
    //表示在服务器里面打开那个文件下的文件
    return gulp.src('./dist')
    .pipe(webServer({
        host: 'localhost',          // 配置打开浏览器的域名
        port: 10008,                 // 配置打开浏览器的端口号
        livereload: true,           // 自动刷新浏览器
        open: './index.html'  // 默认打开 dist 文件夹下的哪个文件
    }))
}

//创建一个 watch 任务
const watchHandler =  function () {
    gulp.watch('./src/**/*.html', htmlHandler) 
    gulp.watch('./src/sass/*.scss', cssHandler)
    gulp.watch('./src/js/*.js', jsHandler)
    gulp.watch('./src/libs/**', libsHandler)
    gulp.watch('./src/img/**', imgHandler)
    gulp.watch('./src/**/favicon.ico', iconHandler)
}

//先按照顺序执行同步任务
module.exports.default = gulp.series(
    delHandler,
    //先执行这里的任务
    gulp.parallel(htmlHandler, cssHandler, jsHandler, libsHandler, imgHandler, iconHandler),
    //再执行服务器任务
    serverHandler,
    watchHandler
)